<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css" media="screen">
    .bg {
        width:200px;
        height: 200px;
        -moz-background-clip: border;
        /* Firefox 3.6 */
        -webkit-background-clip: border;
        /* Safari 4? Chrome 6? */
        background-clip: border-box;
        /* Firefox 4, Safari 5, Opera 10, IE 9 */
        -moz-background-clip: padding;
        /* Firefox 3.6 */
        -webkit-background-clip: padding;
        /* Safari 4? Chrome 6? */
        background-clip: padding-box;
        /* Firefox 4, Safari 5, Opera 10, IE 9 */
        -moz-background-clip: content;
        /* Firefox 3.6 */
        -webkit-background-clip: content;
        /* Safari 4? Chrome 6? */
        background-clip: content-box;
        background-color: #fff;
        /* Firefox 4, Safari 5, Opera 10, IE 9 */
        border: 5px solid rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index:1;
        left: 100px;
        top: 100px;
    }
    
    .test {
        position: relative;
        z-index:0;
        width: 500px;
        height: 500px;
        background-color: #ccc;
        padding:50px;
    }
    </style>
</head>

<body>
    <div>
        <div class="bg"></div>
        <div class="test">
            <strong>测试文字</strong>
            <p>测试文字测试文字测试文字测试文字</p>
        </div>
    </div>
</body>

</html>
